<template>
  <input type="text" v-model="kw" />
  <hr />

  <!-- 在 @before-enter 钩子中设置元素入场前的起始状态 -->
  <!-- 在 @enter 钩子函数中设置元素的入场动画的效果 -->
  <!-- 在 @leave 钩子函数中设置元素的离场动画的效果 -->
  <TransitionGroup tag="ul" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave">
    <li v-for="(item, i) in searchResult" :key="item" :data-index="i">{{ item }}</li>
  </TransitionGroup>
</template>

<script setup>
import { ref, computed } from 'vue'
import { gsap } from 'gsap'

// 所有数据项的列表
const list = ref(['Bruce Lee', 'Jackie Chan', 'Chuck Norris', 'Jet Li', 'Kung Fury'])
const kw = ref('')

// 搜索的结果
const searchResult = computed(() => list.value.filter((x) => x.toLowerCase().includes(kw.value.toLowerCase())))

const onBeforeEnter = (el) => {
  gsap.set(el, {
    opacity: 0,
    height: 0
  })
}

const onEnter = (el, done) => {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15, // 单位是：秒
    onComplete: done
  })
}

const onLeave = (el, done) => {
  gsap.to(el, {
    opacity: 0,
    height: 0,
    delay: el.dataset.index * 0.15, // 单位是：秒
    onComplete: done
  })
}
</script>

<style scoped></style>
